<template>
    <div>
        <el-form :inline="true" :model="searchData" class="demo-form-inline demo-form-inline-left">
            <el-form-item label="产品编号">
                <el-input v-model="searchData.ProductCode" placeholder="产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="searchData.ProductName" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="仓库">
                <el-select v-model="searchData.WarehouseId" placeholder="仓库" clearable style=" width:100%">
                    <el-option label="请选择" :value="0">请选择</el-option>
                    <el-option v-for="item in warehouseList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品批次">
                <el-input v-model="searchData.ProductBatch" placeholder="产品批次"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetStartEndDtoAsync()" icon="el-icon-search">查询</el-button>
                <el-button type="primary" class="el-icon-refresh-right" @click="reseted()">重置</el-button>
                <el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i
                        class="el-icon-upload el-icon--right"></i></el-button>
            </el-form-item>
        </el-form>

        <template>
            <el-table :data="startendList" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="startEndDate" label="日期">
                    <template slot-scope="sc">
                        {{ sc.row.startEndDate.substr(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="productCode" label="产品编号">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="specs" label="产品规格">
                </el-table-column>
                <el-table-column prop="categoryName" label="类别">
                </el-table-column>
                <el-table-column prop="unit" label="存储单位">
                </el-table-column>
                <el-table-column prop="name" label="仓库">
                </el-table-column>
                <el-table-column prop="start" label="期初">
                </el-table-column>
                <el-table-column prop="storage" label="入库">
                </el-table-column>
                <el-table-column prop="delivery" label="出库">
                </el-table-column>
                <el-table-column prop="end" label="期末">
                </el-table-column>
            </el-table>
        </template>

        <br>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                总共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据，共{{ page.pageCount }}页，当前第{{ page.pageIndex }} /
                {{ page.pageCount }}页
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="slot,jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                </el-pagination>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { GetStartEndDtoAsync } from "@/api/StatementMange/Startend";
import { GetWarehousBox } from "@/api/BasicsDatumServer/locationServers";
import XLSX from 'xlsx';
export default {
    //数据
    data() {
        return {
            //仓库列表
            warehouseList: [],
            //查询条件
            searchData: {
                ProductCode: "",
                ProductName: "",
                WarehouseId: 0,
                ProductBatch: "",
            },
            //期初期末列表
            startendList: [],
            //分页
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0
            },
            multipleSelection: [],
        }
    },
    //方法
    methods: {
        //批量获取列表
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //下拉框
        GetWarehousBoxmethod() {
            GetWarehousBox().then((res) => {
                this.warehouseList = res.data;
            });
        },
        //期初期末显示
        GetStartEndDtoAsync() {
            let data = {
                productCode: this.searchData.ProductCode,
                productName: this.searchData.ProductName,
                warehouseId: this.searchData.WarehouseId,
                productBatch: this.searchData.ProductBatch,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };

            GetStartEndDtoAsync(data).then((res) => {
                this.startendList = res.data.data.data;

                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //重置
        reseted() {
            this.searchData = {
                ProductCode: "",
                ProductName: "",
                WarehouseId: 0,
                ProductBatch: "",
            }
            this.GetStartEndDtoAsync();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetStartEndDtoAsync();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetStartEndDtoAsync();
        },
        //导出
        exportListToExcel(startendList) {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    message: '至少选择一项要导出的数据！',
                    type: 'warning'
                });
                return;
            }
            // 过滤需要导出的字段
            const filteredData = startendList.map(item => {
                return {
                    日期: item.startEndDate.substr(0, 10),
                    产品编号: item.productCode,
                    产品名称: item.productName,
                    产品规格: item.specs,
                    类别: item.categoryName,
                    存储单位: item.unit,
                    仓库: item.name,
                    入库: item.storage,
                    出库: item.delivery,
                    期末: item.end,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(filteredData);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '期初期末.xlsx');

        },
    },
    //勾子函数加载数据
    created() {
        this.GetWarehousBoxmethod();

        this.GetStartEndDtoAsync();
    },
}
</script>

<style></style>